<template>
	<el-dialog
		center
		:visible="visible"
		width="475px"
		class="setting-div"
		:close-on-click-modal="true"
		:destroy-on-close="true"
		:before-close="handleClose"
		@close="handleClose"
	>
		<div slot="title" class="dialog-title">
			选择字段
		</div>
		<div>
			<el-checkbox v-model="isColumnSetAll" @change="handleChoice">
				全选
			</el-checkbox>
		</div>
		<el-divider></el-divider>
		<div
			v-for="(value, key) in activityListField"
			:key="key"
			class="setting-div"
		>
			<el-checkbox v-model="dialogColumnData[key]">
				{{ key }}
			</el-checkbox>
		</div>
		<div slot="footer" class="dialog-footer" style="text-align: right;">
			<el-button @click="handleClose">
				{{ $t('common.cancel') }}
			</el-button>
			<el-button type="primary" @click="handleSubmit">
				{{ $t('common.confirm') }}
			</el-button>
		</div>
	</el-dialog>
</template>

<script>
export default {
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		activityListField: {
			type: Object,
			default: () => {}
		},
		dialogColumnData: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			isColumnSetAll: false
		}
	},
	watch: {
		dialogColumnData: {
			handler(val) {
				this.isColumnSetAll = !Object.values(val).includes(false)
			},
			deep: true
		}
	},
	methods: {
		handleChoice() {
			this.$emit('choiceColumnSet', this.isColumnSetAll)
		},
		handleSubmit() {
			this.$emit('submitColumnSet')
		},
		handleClose() {
			this.$emit('update:visible', false)
		}
	}
}
</script>
<style lang="scss" scoped>
.dialog-title {
	text-align: left;
	font-weight: 900;
	font-size: 19px;
	color: #7f7f7f;
}
</style>
